var myChart1 = echarts.init(document.getElementById("chartWlTop"));

$(function () {
  capitalCost = 1;
  initcapitalCostData(); //获取数据
});

function initcapitalCostData() {
  var obj = {
    budgetYear: fullYear,
    budgetMonth: fullMonth,
    dept: fullDepartment,
    status: 2,
    chartPage: 5010202,
  };
  ApiGet("getdata", obj, function (e) {
    var json = JSON.parse(e);

    var chartData = json.items[0].charts;
    console.log(chartData, "oooo");
    zijinliuchuNum(chartData[0].data); //资金流出数字
    getMonPayComplete(chartData[1].data); //月度支出
    // getTypePayRate(chartData[2].data); //单位维度  各类型支出占比
    getWlTopPay(chartData[3].data); //往来单位TOP5
    getmonthDetail(chartData[4].data)
  });
}

function zijinliuchuNum(data) {
  //总金额
  $(".zongjine").text(pricefmt((data[0].key01 / 10000).toFixed(0)));
  //现金
  $("#cash1").text(pricefmt((data[0].key02 / 10000).toFixed(0)));
  //银行承兑票据
  $("#cash2").text(pricefmt((data[0].key03 / 10000).toFixed(0)));
  //商业承兑票据
  $("#cash3").text(pricefmt((data[0].key04 / 10000).toFixed(0)));
}
//月度支出
function getMonPayComplete(data) {
  // let currYear = [];
  // let prevYear = [];
  // let increase = [];
  // let claimedxData = []
  // for (let i = 0; i < re.length; i++) {
  // 	claimedxData.push(re[i].key01)
  // 	currYear.push(re[i].key02)
  // 	prevYear.push(re[i].key03)
  // 	increase.push((re[i].key04 * 100).toFixed(2))
  // }
  let yueduzhichu = [];
  data.forEach((item) => {
    yueduzhichu.push((item.key02 / 10000).toFixed(2));
  });
  let xData = [
    "1月",
    "2月",
    "3月",
    "4月",
    "5月",
    "6月",
    "7月",
    "8月",
    "9月",
    "10月",
    "11月",
    "12月",
  ];
  let legendData = ["支出"];
  let Data = [{
    name: "支出",
    type: "bar",
    barWidth: "50",
    barGap: 0,
    itemStyle: {
      color: "#165DFF",
    },
    data: yueduzhichu,
  }, ];
  have("chartMonPay") ? oneYBar("chartMonPay", xData, legendData, Data) : "";
}

// var myChart = echarts.init(document.getElementById("chartTypePay"));

//单位维度  各类型支出占比
function getTypePayRate(data) {
  let yuannei = (data[0].key03 * 100).toFixed(2);
  let yuanwai = (data[1].key03 * 100).toFixed(2);
  let jituan = (data[2].key03 * 100).toFixed(2);

  $("#yuannei").text(pricefmt((data[0].key02 / 10000).toFixed(2)));
  $("#yuanwai").text(pricefmt((data[1].key02 / 10000).toFixed(2)));
  $("#jituan").text(pricefmt((data[2].key02 / 10000).toFixed(2)));
  let RateTotal = pricefmt((data[0].key04 / 10000).toFixed(2));

  let color = ["#165DFF", "#50CD89", "#FFC700"];
  let echartData = [{
      name: "院内",
      value: yuannei,
    },
    {
      name: "院外集团内",
      value: yuanwai,
    },
    {
      name: "集团外",
      value: jituan,
    },
  ];

  chart = {
    color: color,
    title: [{
        text: "共计(万元)",
        x: "center",
        top: "42%",
        textStyle: {
          color: "#4E5969",
          fontSize: 12,
          fontWeight: "100",
        },
      },
      {
        text: "" + RateTotal + "",
        x: "center",
        top: "50%",
        textStyle: {
          fontSize: 24,
          color: "#1D2129",
          foontWeight: "500",
        },
      },
    ],
    legend: {
      top: "5%",
      left: "center",
    },
    tooltip: {
      backgroundColor: "transparent",
      borderWidth: 0,
      padding: 0,
      formatter: function (params) {
        let result = `<div class="chartItemFormart">
                                <div style="display: flex; flex-direction: row;justify-content: space-between;" >
                                    <div style="display: flex; flex-direction: row;align-items: center;">
                                        ${params.marker}
                                        <p style="color: #4E5969;font-size: 12px;font-weight:600;">${params.name}</p>
                                    </div>
                                    <div class="">
                                        <h4 style="color: #1D2129;font-size: 14px;font-weight: 600;">${params.value}<span style="font-weight: normal;color: #86909C;font-size: 12px;">万元</span></h4>
                                    </div>
                                </div>
                            </div>`;
        return result;
      },
    },
    polar: {
      radius: ["44%", "50%"],
      center: ["50%", "50%"],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [{
        type: "pie",
        radius: ["55%", "67%"],
        center: ["50%", "50%"],
        data: echartData,
        hoverAnimation: false,
        labelLine: {
          normal: {
            show: false,
          },
        },
        label: {
          normal: {
            show: false,
          },
        },
      },
      {
        data: [{
          value: 100,
        }, ],
      },
    ],
  };
  myChart.setOption(chart);

  // let claimeddw = '万元';
  // let claimedRateData = [{
  //     name: '本年成本',
  //     type: 'pie',
  //     left: '0',
  //     radius: ['50%', '65%'],
  //     center: ['30%', '50%'],
  //     avoidLabelOverlap: true,
  //     itemStyle: {
  //         borderColor: '#fff',
  //         borderWidth: 4
  //     },
  //     color: [
  //         '#165DFF',
  //         '#50CD89',
  //         '#FFC700',
  //     ],
  //     label: {
  //         show: false
  //     },
  //     data: [{
  //         value: yuannei,
  //         name: '院内',
  //         percent: yuannei
  //     },
  //     {
  //         value: yuanwai,
  //         name: '院外集团内',
  //         percent: yuanwai
  //     },
  //     {
  //         value: jituan,
  //         name: '集团外',
  //         percent: jituan
  //     }

  //     ],
  // }]
  // have('chartTypePay') ? Proportion('chartTypePay', RateTotal, claimeddw,
  //     '', claimedRateData) : ''
}

//往来单位TOP5
function getWlTopPay(data) {
  console.log(data, "111");
  let wanglaidanwei = [];
  let jine = [];

  data.forEach((item) => {
    wanglaidanwei.push(item.key01);
    jine.push((item.key02 / 10000).toFixed(2));
  });

  let yData = wanglaidanwei;

  let legendData = ["到款金额"];
  let Data = [{
    name: "到款金额",
    type: "bar",
    barWidth: "13",
    barGap: 0,
    itemStyle: {
      color: "#165DFF",
    },
    data: jine,
  }, ];
  have("chartWlTop") ?
    YhorizontalBar("chartWlTop", legendData, yData, Data, "万元") :
    "";
}

//鼠标hover展示全部
function extension(chart) {
  //判断是否创建过div框,如果创建过就不再创建了
  var id = document.getElementById("extension");

  if (!id) {
    var div = "<div id = 'extension' sytle=\"display:none\"></div>";
    $("html").append(div);
  }

  chart.on("mouseover", function (params) {
    if (params.componentType == "yAxis") {
      $("#extension")
        .css({
          position: "absolute",
          color: "#4E5969",
          border: "solid 2px #F7F8FA",
          "font-family": "Arial",
          "font-size": "18px",
          padding: "8px 5px",
          display: "inline",
          background: "#F4F7FC",
          "border-radius": "12px",
        })
        .text(params.value);

      $("html").mousemove(function (event) {
        var xx = event.pageX - 30;
        var yy = event.pageY + 20;
        $("#extension").css("top", yy).css("left", xx);
      });
    }
  });

  chart.on("mouseout", function (params) {
    if (params.componentType == "yAxis") {
      $("#extension").css("display", "none");
    }
  });
}


// 月度累计流出明细
function getmonthDetail(data) {
  let legendData = ['现金', '银行承兑汇票', '商业承兑汇票']
  let xianjin = [];
  let yinhang = [];
  let shangye = [];
  for (let i = 0; i < data.length; i++) {
    xianjin.push((data[i].key02 / 10000).toFixed(1))
    yinhang.push((data[i].key03 / 10000).toFixed(1))
    shangye.push((data[i].key04 / 10000).toFixed(1))
  }
  let leijirate = [{
      name: '现金',
      smooth: false, //平滑曲线显示
      symbol: 'circle', //标记的图形为实心圆
      symbolSize: 8, //标记的大小
      itemStyle: {
        normal: {
          color: '#165DFF',
          borderColor: '#FFFFFF', //圆点透明 边框
          borderWidth: 2,
        },
      },
      showSymbol: false,
      type: 'line',
      lineStyle: {
        width: 2
      },
      data: xianjin
    },
    {
      name: '银行承兑汇票',
      smooth: false, //平滑曲线显示
      symbol: 'circle', //标记的图形为实心圆
      symbolSize: 8, //标记的大小
      itemStyle: {
        normal: {
          color: '#14C9C9',
          borderColor: '#FFFFFF', //圆点透明 边框
          borderWidth: 2,
        },
      },
      showSymbol: false,
      lineStyle: {
        width: 2
      },
      type: 'line',
      data: yinhang
    },
    {
      name: '商业承兑汇票',
      smooth: false, //平滑曲线显示
      symbol: 'circle', //标记的图形为实心圆
      symbolSize: 8, //标记的大小
      itemStyle: {
        normal: {
          color: '#7239EA',
          borderColor: '#FFFFFF', //圆点透明 边框
          borderWidth: 2,
        },
      },
      showSymbol: false,
      lineStyle: {
        width: 2
      },
      type: 'line',
      data: shangye
    }
  ]

  have('monthDetail') ? lineChartMD('monthDetail', leijirate, legendData) : ''
}